<template>
    <div class="classify">
        <div> <el-button @click='xinzeng' type="primary">新增</el-button> </div>
        <div>
                <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
                prop="id"
                label="顺序"
                width="80">
            </el-table-column>
            <el-table-column
                prop="name"
                label="分类名字"
                width="100">
            </el-table-column>
            <el-table-column
                prop="description"
                label="分类简介">
            </el-table-column>
            <el-table-column
                    prop="no"
                    label="序号"
                    width="80">
             </el-table-column>
            <el-table-column label="操作">
                 <template v-slot='scope'>
                     <span @click="dele(scope.row)">删除</span>
                    <span @click="fix(scope.row)">修改</span>
                 </template>
            </el-table-column>
        </el-table>
        </div>
        <!-- 模态框 -->
                            <el-dialog title="录入分类信息" :visible.sync="dialogFormVisible">
                    <el-form :model="form">
                        <el-form-item label="名称" :label-width="formLabelWidth">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="介绍" :label-width="formLabelWidth" >
                        <el-input v-model="form.description" autocomplete="off"></el-input>
                        </el-form-item>
                        <el-form-item label="序号" :label-width="formLabelWidth">
                        <el-input v-model="form.no" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-form>

                    <div slot="footer" class="dialog-footer" >
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                        <el-button type="primary" @click="save">确 定</el-button>
                    </div>

                    </el-dialog>


    </div>
</template>

<script>
import qs from 'qs'
import axios from '@/http/axios'
export default {
    data(){
        return{
            tableData:[],
            params:{
                
            },
            formLabelWidth:'120px',
            dialogFormVisible:false,
            form:{},
        }
    },
    
    created(){
        this.table_classify()
        
    },
    watch:{
        params:{
            handler:function(){
                this.table_classify()
            }
        },
    },
   
    methods:{
        fix(item){
            // 修改
            this.dialogFormVisible=true;
            this.form=JSON.parse(JSON.stringify(item))
        },
        dele(item){
             let obj={
                id:item.id
            }
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then((res)=>{
                axios({
                    url:'http://121.199.29.84:8001/category/deleteById',
                    method:'get',
                    params:obj,
                }).then((res)=>{
                    this.table_classify(),
                    this.$notify({
                    title:'成功',
                    message:res.data.message,
                    type:'success'
                });
                })
            })
        },
        save(){
            this.dialogFormVisible=false
            axios({
                url:'http://121.199.29.84:8001/category/saveOrUpdate',
                method:'post',
                data:qs.stringify(this.form),
                contentType:'application/x-www-form-urlencoded'
            }).then((res)=>{
                this.table_classify()
                this.$notify({
                    title:'成功',
                    massage:res.data.message,
                    type:'success'
                    });
            })
        },
        xinzeng(){
            this.dialogFormVisible=true,
            this.form={}
        },
        
        table_classify(){
            let obj={

            }
            axios({
                url:'http://121.199.29.84:8001/category/findAll',
                method:'get',
                params:obj,
            }).then((res)=>{
                this.tableData=res.data.data

            })
        }
    }
}
</script>